<template>
  <div>
    <!--        查询地点-->
    <div class="searchWrap">
      <input v-model="searchVal" type="text" class="searchPlace">
      <button @click="getSearchVal">查询</button>
      <button @click="ride">骑行路线</button>
    </div>
    <div class="mapContainer">
      <div id="container" />
      <!-- 显示导航步骤-->
      <div ref="panelWrap" class="panelWrap">
        <div v-show="initOpen" ref="panelOpen" class="panelOpen" @click="togglePanelFn" />
        <div v-show="togglePanel" id="panel" />
      </div>
    </div>
  </div>

</template>
<script>
import AMapLoader from "@amap/amap-jsapi-loader";
// 设置安全密钥
window._AMapSecurityConfig = {
  securityJsCode: "1f78e1a360881271fc19b6640fbaa91f" // 安全密钥，
};
let map;
export default {
  data() {
    return {
      // 此处不声明 map 对象，可以直接使用 this.map赋值或者采用非响应式的普通对象来存储。
      ip: [113.883804, 22.767403],
      searchVal: "", // 查询地点
      initOpen: false, // 初始化展开按钮
      togglePanel: false, // 初始化展开按钮
      lnglat: [113.916626, 22.754276]
    };
  },
  mounted() {
    this.initMap();
  },
  methods: {
    initMap() {
      AMapLoader.load({
        "key": "673e9cbd98e30cf47d3fe12e071e9666", // 看上边第三张图
        "version": "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        "plugins": ["AMap.Scale"] // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      }).then((AMap) => {
        // 初始化地图
        map = new AMap.Map("container", {
          viewMode: "3D", // 2D或3D   是否为3D地图模式
          zoom: 13, // 初始化地图级别
          plugins: [""], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
          center: [113.883804, 22.767403], // 初始化地图中心点位置
          resizeEnable: true

        });
        map.on("click", this.onClick);
        // this.getLocation();
        this.ride();
      }).catch(e => {
        console.log(e);
      });
    },
    //
    onClick() {
      console.log("shiyong ");
    },
    // 获取用户当前定位
    getLocation() {
      const that = this;
      map = new AMap.Map("container", {
        resizeEnable: true
      });

      AMap.plugin("AMap.Geolocation", function() {
        const geolocation = new AMap.Geolocation({
          enableHighAccuracy: true, // 是否使用高精度定位，默认:true
          timeout: 5000, // 超过10秒后停止定位，默认：5s
          buttonPosition: "RB", // 定位按钮的停靠位置
          buttonOffset: new AMap.Pixel(10, 20), // 定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
          zoomToAccuracy: true // 定位成功后是否自动调整地图视野到定位点
        });

        // 这一步很关键，否则定位的按钮不会出现
        map.addControl(geolocation);

        // 需要在vue.config.js里开启https访问方式
        geolocation.getCurrentPosition(function(status, result) {
          console.log(status);
          if (status === "complete") {
            console.log(status);
            onComplete(result);
          } else {
            onError(result);
          }
        });

        function onComplete(data) {
          // data是具体的定位信息
          console.log("成功", data);
          var str = [];
          str.push("定位结果：" + data.position);
          str.push("定位类别：" + data.location_type);
          if (data.accuracy) {
            str.push("精度：" + data.accuracy + " 米");
          }
          // 如为IP精确定位结果则没有精度信息
          str.push("是否经过偏移：" + (data.isConverted ? "是" : "否"));
          console.log("str", str);
        }

        function onError(data) {
          // 定位出错
          console.log("失败", data);
        }
      });
    },
    getSearchVal() {
      const _this = this;
      var marker = new AMap.Marker();
      AMap.plugin("AMap.Geocoder", function() {
        var geocoder = new AMap.Geocoder({
          // city: "010", //城市设为北京，默认：“全国”
        });
        var address = _this.searchVal;
        geocoder.getLocation(address, function(status, result) {
          if (status === "complete" && result.geocodes.length) {
            var lnglat = result.geocodes[0].location;
            console.log("经纬度：", lnglat);
            _this.lnglat = lnglat;
            marker.setPosition(lnglat);
            map.add(marker);// map是一个页面全局变量
            map.setFitView(marker);
          } else {
            console.log("根据地址查询位置失败");
          }
        });
      });
    },
    // 骑行导航
    ride() {
      AMap.plugin("AMap.Driving", function() {
        // 构造路线导航类
        var driving = new AMap.Driving({
          map: map,
          panel: "panel"
        });
        // 根据起终点经纬度规划驾车导航路线
        driving.search(new AMap.LngLat(116.379028, 39.865042), new AMap.LngLat(116.427281, 39.903719), function(status, result) {
        // result 即是对应的驾车导航信息，相关数据结构文档请参考  https://lbs.amap.com/api/javascript-api/reference/route-search#m_DrivingResult
          if (status === "complete") {
            console.log("绘制驾车路线完成");
          } else {
            console.log("获取驾车数据失败：");
          }
        });
      });
    },
    // 展开/收起路线列表
    togglePanelFn() {
      this.togglePanel = !this.togglePanel;
    }

  }
};
</script>

<style scoped>
.mapContainer {
        width: 600px;
        height: 600px;
        position: relative;
    }

    #container {
        padding: 0;
        margin: 0;
        width: 100%;
        height: 100%;
    }

    .panelWrap {
        /*width: 90%;*/
        height: 35rem;
        position: absolute;
        top: 0;
        right: 0;
        display: flex;
        justify-content: right;
    }

    #panel {
        width: 28rem;
        height: 100%;
        overflow-y: scroll;
    }

    .panelOpen {
        width: 3rem;
        height: 3rem;
        /* background: url("../assets/open.png") no-repeat; */
        background-size: contain;
        transform: rotate(-90deg);
    }

    .searchWrap {
          margin-top: 13px;
        width: 30rem;
        height: 4rem;
    }

    .searchPlace {
        width: 17rem;
        height: 2rem;
    }
</style>
